<template>
    <!-- 添加教师 -->
    <div class="edit-techer">

        <el-form label-width="200px" :model="editTeacher" :rules="rules" ref="ruleFormRef">
            <!-- 账户信息 -->
            <div class="accountNumber">
                <el-tag>账号信息</el-tag>
                <el-form-item label="编号 :" prop="number" class="accountNumber-first">
                    <el-input v-model="editTeacher.number" placeholder="请输入编号" clearable size="large" />
                </el-form-item>
                <el-form-item label="手机号 :" prop="telephone">
                    <el-input v-model="editTeacher.telephone" placeholder="请输入手机号" clearable size="large" />
                </el-form-item>
                <el-form-item label="密码 :" prop="password">
                    <el-input v-model="editTeacher.password" type="password" placeholder="密码需大于8位" show-password
                        size="large" />
                </el-form-item>
                <el-form-item label="确认密码 :" prop='surePassword'>
                    <el-input v-model="editTeacher.surePassword" type="password" placeholder="请再次输入密码 :" show-password
                        size="large" />
                </el-form-item>
            </div>

            <!-- 教师信息  -->
            <div class="teacherInfo">
                <el-tag>教师信息</el-tag>
                <el-form-item label="姓名 :" prop="name" class="teacherInfo-first">
                    <el-input v-model="editTeacher.name" placeholder="请输入" clearable size="large" />
                </el-form-item>
                <el-form-item label="头像" prop="photo">
                    <!-- <el-input type='file' style="width:320px" v-model="editTeacher.photo" size="large" /> -->
                    <el-upload v-model:file-list="fileList" class="upload-demo"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-change="handleChange">
                        <el-button type="primary" style="margin-left: 40px;">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                jpg/png files with a size less than 500kb
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="简介 :" prop="introduction">
                    <el-input v-model="editTeacher.introduction" :rows="2" type="textarea" placeholder="最少150个字"
                        size="large" />
                </el-form-item>

                <el-form-item label="年级 :" prop="grade">
                    <el-select v-model="editTeacher.grade" class="m-2" placeholder="请选择" size="large">
                        <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="科目 :" prop="subject">
                    <el-select v-model="editTeacher.subject" class="m-2" placeholder="请选择" size="large">
                        <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </div>

            <!-- 设置 -->
            <div class="set">
                <el-tag>设置</el-tag>
                <el-form-item label="佣金比 :" prop="commission" class="set-first">
                    <el-input v-model="editTeacher.commission" placeholder="请输入" clearable size="large" />
                    <span class="percentage">%</span>
                </el-form-item>

                <el-form-item label="抽成比 :" prop="takePercentag">
                    <el-input v-model="editTeacher.name" placeholder="请输入" clearable size="large" />
                    <span class="percentage">%</span>
                </el-form-item>
                <el-form-item label="账号状态 :" prop="selected">
                    <el-radio-group v-model="editTeacher.selected">
                        <el-radio label="启用" />
                        <el-radio label="禁用" />
                    </el-radio-group>

                </el-form-item>

                <el-form-item class="buttonStyle">
                    <el-button type="primary" class="sureBtn" @click="submitForm(ruleFormRef)">
                        确认
                    </el-button>
                    <el-button type="default">返回</el-button>
                </el-form-item>
            </div>

        </el-form>

    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

// 导入了反而用不了,目测是自动导入了,不能重复导入ElMessage
// import { ElMessage } from 'element-plus'

const ruleFormRef = ref()

// 表单全部初始数据
const editTeacher = reactive({
    number: '',
    telephone: '',
    password: '',
    surePassword: '',
    name: '',
    photo: '',
    introduction: '',
    grade: '',
    subject: '',
    commission: '',
    takePercentag: '',
    selected: '',
})

// 年级数据
const gradeList = [
    {
        value: '小学',
        label: '小学',
    },
    {
        value: '初中',
        label: '初中',
    },
    {
        value: '高中',
        label: '高中',
    },
]


// 科目数据
const subjectList = [
    {
        value: '语文',
        label: '语文',
    },
    {
        value: '数学',
        label: '数学',
    },
    {
        value: '英语',
        label: '英语',
    },
    {
        value: '化学',
        label: '化学',
    },
    {
        value: '物理',
        label: '物理',
    },
    {
        value: '生物',
        label: '生物',
    },

]

// 头像上传
const fileList = ref([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
])

const handleChange = () => {
    fileList.value = fileList.value.slice(-3)
}

const rules = reactive({
    number: [
        {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
        },
    ],
    telephone: [
        {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '密码需大于8位',
            trigger: 'blur',
        },
    ],
    surePassword: [
        {
            required: true,
            message: '请再次输入密码',
            trigger: 'blur',
        },
    ],
    name: [
        {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
        },
    ],
    photo: [
        {
            message: '请选择图片',
            required: true,
            trigger: 'blur',

        },
    ],
    introduction: [
        {
            required: true,
            message: '请输入简介',
            trigger: 'blur',
        },
    ],
    grade: [
        {
            required: true,
            message: '请选择年级',
            trigger: 'change',
        },
    ],
    subject: [
        {
            required: true,
            message: '请选择科目',
            trigger: 'change',
        },
    ],
    commission: [
        {
            required: true,
            message: '请输入佣金比',
            trigger: 'blur',
        },
    ],
    takePercentag: [
        {
            message: "请输入抽成比",
            required: true,
            trigger: 'blur',

        },
    ],
    selected: [
        {
            required: true,
            message: '请选择账号状态',
            trigger: 'change',
        },
    ],
})

// 确定按钮,触发表单验证,调用ref实例对象实现
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            ElMessage({
                grouping: true,
                showClose: true,
                message: "表单验证通过",
                type: 'success',
            })
        } else {
            ElMessage({
                grouping: true,
                showClose: true,
                message: "表单验证失败",
                type: 'error',
            })
        }
    })
}

</script>

<style lang="scss" scoped>
:deep(.el-form-item__error) {
    left: 41px !important;
    margin: 2px 0;
}

.edit-techer {
    padding: 50px;
    box-sizing: border-box;
    background-color: #fff;
}

.el-from {
    display: flex;
    flex-direction: column;
}

.accountNumber,
.teacherInfo,
.set {
    border-top: 1px solid #e4f1ff;
}

:deep(.teacherInfo-first),
:deep(.accountNumber-first),
:deep(.set-first) {
    margin-top: 20px;
}


.el-input {
    width: 320px;
    margin-left: 40px;
}

:deep(.el-textarea__inner) {
    height: 150px;
    width: 320px;
    margin-left: 40px;
}

.el-select,
.el-radio-group {
    margin-left: 40px;
}

.percentage {
    margin-left: 10px;
}

.buttonStyle {
    margin: 30px 50px 0 38px;
}

.sureBtn {
    width: 100px
}
</style>